Country Selector
An HTML <select>, even with <optgroup> elements, renders an unwieldy list of countries which is not filterable. Not all browsers support the <optgroup element>.
An HTML <input> with a <datalist> renders an equally unwieldy list but doesn't support <optgroup>. The list is filterable but browsers do not do this in a consistent way and, the <datalist> element isn't supported by all browsers.
The ARIA Editable Combobox with List Autocomplete can achieve the same functionality as the best example of <input> with a <datalist> but is implemented by JavaScript so works equally well in browsers where scripting is enabled.
All things considered, it is best to start with a <select>, with <optgroup> elements, and then use JavaScript to upgrade to an ARIA Editable Combobox with List Autocomplete.
Example
Code
HTML:
JavaScript:
CSS:
External Links
- Smashing Magazine: Redesigning The Country Selector
- Adrian Roselli: Stop Using 'Drop-down'
- Jotform: HTML5 Datalist: What You Need To Know
- MDN: aria-autocomplete
- MDN: ARIA: listbox role
- MDN: ARIA: combobox role
- ARIA Authoring Practices Guide (APG): Editable Combobox With List Autocomplete Example
- W3C: Editable Combobox With List Autocomplete Example